import {PolymerElement, html} from 'https://unpkg.com/@polymer/polymer/polymer-element.js?module';

class OwlAir extends PolymerElement {


    constructor(){

        super();
    }
    connectedCallback(){

        super.connectedCallback();

        let cols = ['#f5d76e', '#f7ca18', '#f4d03f', '#ececec', '#ecf0f1', '#a2ded0'];
        for(let i=0;i<180;i++){


            let size=Math.random()*3;
            let color=cols[parseInt(Math.random()*4)];
            let airitem=document.createElement("span");
            airitem.className="air-item";
            airitem.style.width=size+"px";
            airitem.style.height=size+"px";
            airitem.style.top=Math.random()*100+"%";
            airitem.style.left=Math.random()*100+"%";
            airitem.style.background=color;
            airitem.style.boxShadow="0 0 "+Math.random()*10+"px "+ color;
            this.$.airbox.appendChild(airitem);
            console.log(airitem);

        }

        let item;
        setTimeout(()=>{

          item=this.$.airbox.children;
          for(let i=0;i<item.length;i++){
              item[i].style.top=Math.random()*100+"%";
              item[i].style.left=Math.random()*100+"%";

          }

        },1000);

        setInterval(()=>{

          for(let j=0;j<item.length;j++){

              item[i].style.top=Math.random()*100+"%";
              item[i].style.left=Math.random()*100+"%";
          }
        }, 100000);

    }
    static get properties() { return {
        mood: {

            type: String,
            value: "",
            observer:"_moodChange"
        },

        flag:{

            type:Boolean,
            value:false
        }

    }};


    _moodChange(newValue,oldValue){



    }

    static get template() {
        return html`
             <style>
             
             .owl-air{
             
                width: 100%;
                height: 100%;
                background-color: black;
               
           
             }
             
             .air-item{
             
             
             position: absolute;
             display: block;
             border-radius: 100%;
             transition:all 100s linear;
             
               
             }
             
  
                     
            </style>
        
          <div class="owl-air" id="airbox">
          
          
                      
          </div>
                    
        
        `;
    }

    toggle(){


    }

}

customElements.define("owl-air",OwlAir);
